<template>
  <div class="app-container">
      <div style="display:flex;justify-content:space-between;align-items:center">
        <h3>基本信息</h3>
        <!-- <el-button size="small" @click="handleEdit">编辑</el-button> -->
      </div>
      <el-row>
        <el-table
          :data="info"
          border
          fit
          style="width: 100%;"
          :element-loading-text="global.loadingStr"
          :header-cell-style="{background:global.mainColor}"
        >
          <el-table-column label="学员姓名" align="center" width="160">
            <template slot-scope="{row}">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="年龄" align="center">
            <template slot-scope="{row}">
              <span>{{ ageFormatter(row.age) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别" align="center" >
            <template slot-scope="{row}">
              <span>{{ row.gender===1?'男':'女' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" align="center"/>
          <el-table-column prop="remark" label="家长备注" align="center"/>
        </el-table>
      </el-row>

       <el-row>
        <h3>订单信息</h3>
      </el-row>
       <el-row>
        <el-table
          :data="data"
          border
          fit
          style="width: 100%;"
          :element-loading-text="global.loadingStr"
          :header-cell-style="{background:global.mainColor}"
        >
          <el-table-column label="订单编号" align="center">
            <template slot-scope="{row}">
              <span>{{ row.orderNo }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sss" label="活动类型" align="center">

          </el-table-column>
          <el-table-column label="购买时间" align="center" >
            <template slot-scope="{row}">
              <!-- <el-date-picker
                v-if="row.edit"
                v-model.number="row.paymentTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="timestamp"
                placeholder="选择日期时间">
              </el-date-picker> -->
              <span >{{ row.paymentTime | parseTime('{y}/{m}/{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderSource" label="订单来源" align="center">
             <template slot-scope="{row}">
              <span>{{ row.orderSource | orderPayType }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="paymentStatus" label="订单状态" align="center">
             <template slot-scope="{row}">
            <span>{{ row.paymentStatus | orderType }}</span>
             </template>
          </el-table-column>
        </el-table>
      </el-row>
       <el-row style="margin-top:-1px">
        <el-table
          :data="setMealVO"
          border
          fit
          style="width: 100%;"
          :element-loading-text="global.loadingStr"
          :header-cell-style="{background:global.mainColor}"
        >
          <el-table-column label="课程名称/课程套餐" align="center">
            <template slot-scope="{row}">
              <h4>{{ row.courseName }}/{{ row.setMealName }}</h4>
            </template>
          </el-table-column>
          <el-table-column prop="scheduleName" label="课程套餐" align="center">

          </el-table-column>
          <el-table-column label="授课地址" align="center" >
            <template slot-scope="{row}">
              <span>{{ row.paymentTime | parseTime('{y}/{m}/{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="teacheName" label="授课教师" align="center">
          </el-table-column>
          <el-table-column prop="paymentStatus" label="课程进度" align="center">
             <template slot-scope="{row}">
            <span>{{ row.leaveRequestedCount+row.alreadyInClassCount }}/{{ row.surplusCount }}</span>
             </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <h3>价格信息</h3>
      </el-row>
      <el-row>
        <el-table
          :data="priceData"
          border
          fit
          style="width: 100%;"
          :element-loading-text="global.loadingStr"
          :header-cell-style="{background:global.mainColor}"
        >
          <el-table-column label="课程总价" align="center">
            <template slot-scope="{row}">
              <span>￥{{ row.commodityTotal }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="businessDiscountAmount" label="机构优惠" align="center">
            <template slot-scope="{row}">
              <span>优惠券：<i class="el-icon-minus"></i>￥{{ row.businessDiscountAmount || 0}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平台补贴优惠" align="center" >
            <template slot-scope="{row}">
              <span class="text_color">￥{{ row.platformDiscountAmount ||0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="commission" label="佣金" align="center">
              <template slot-scope="{row}">
              <span class="text_color">￥{{ row.commission ||0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="paidInAmount" label="实付金额" align="center">
             <template slot-scope="{row}">
              <span class="text_color">￥{{ row.paidInAmount ||0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="actualCollection" label="实收金额" align="center">
            <template slot-scope="{row}">
              <span class="text_color"><i class="el-icon-plus"></i>￥{{ row.actualCollection ||0}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
  </div>
</template>

<script>
import { orderDetail } from '@/api/order'

export default {
  name: 'OrderDetail',
  data() {
    return {
      id: this.$route.query.id,
      info: [],
      data: [],
      setMealVO: [],
      priceData: []
    }
  },
  computed: {

  },
  created() {
    this.getOrder()
  },
  methods: {
    handleEdit() {
      this.data[0].edit = true
      this.setMealVO[0].edit = true
      this.priceData[0].edit = true
    },
    getOrder() {
      orderDetail({
        id: this.id
      }).then(res => {
        // res.data.order.edit = false
        // res.data.setMealVO.edit = false
        // res.data.priceInfo.edit = false
        this.info = res.data.student ? [res.data.student] : []
        this.data = res.data.order ? [res.data.order] : []
        this.setMealVO = res.data.setMealVO ? [res.data.setMealVO] : []
        this.priceData = res.data.priceInfo ? [res.data.priceInfo] : []
      })
    },
    ageFormatter(v) {
      // 时间戳 this.$options.filters.parseTime(new Date().valueOf(), '{y}')
      const nowDate = Number(
        this.$options.filters.parseTime(new Date().valueOf(), '{y}')
      )
      const birthday = Number(this.$options.filters.parseTime(v, '{y}'))
      const y = nowDate - birthday >= 1 ? nowDate - birthday : 1
      return y
    }
  }
}
</script>
 <style lang="scss" scoped>
  .text_color{
    // color:rgb(255, 116, 23)
    color:rgb(255, 71, 71)
  }
 </style>
